import { Form, NavLink, Outlet, useLoaderData, useSubmit } from 'react-router-dom'
import classNames from 'classnames'
import dayjs from 'dayjs'
import { AddOne, Delete } from '@icon-park/react'
import styles from './style.module.less'

export function Contents () {
  const contents = useLoaderData() as IContent[]
  const submit = useSubmit()

  return (
    <main className='h-full'>
      <div className={styles.container}>
        {/* 文本片段标题栏 */}
        <div className={styles.list}>
          <Form
            className='px-1 py-2 border-b flex items-center'
          >
            <input
              name="keyword"
              placeholder='输入关键字'
              className='outline-none w-full text-sm font-bold bg-secondary px-1 text-primary placeholder:text-t-secondary'
              onChange={e => submit(e.target.form)}
            />
            <AddOne 
              theme="outline"
              size="18"
              fill="currentColor"
              className='cursor-pointer'
              onClick={() => {
                submit(null, { method: 'POST' })
              }}
            />
          </Form>
          {contents.map(c => {
            return (
              <NavLink
                to={`/manager/category/contents/${c.category_id}/content/${c.id}`}
                className={({ isActive }) => {
                  return classNames({
                    [styles.active]: isActive,
                  })
                }}
                key={c.id}
                onDragStart={e => {
                  e.dataTransfer.setData('id', String(c.id))
                }}
              >
                <div>
                  <div className='truncate flex-1'>{c.title}</div>
                  <div className='basis-[54px]'>
                    <span className={styles.date}>{dayjs(c.created_at).format('YY-MM-DD')}</span>
                    <Delete
                      theme="outline"
                      size="14"
                      fill="currentColor"
                      className={styles.delete_icon}
                      onClick={(e) => {
                        e.preventDefault()
                        e.stopPropagation()
                        submit({ id: c.id }, { method: 'DELETE' })
                      }}
                    />
                  </div>
                </div>
              </NavLink>
            )
          })}
        </div>
        <div className={styles.content}>
          <Outlet />
        </div>
      </div>
    </main>
  )
}
